<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/img/logo.png" alt="my login image" />
    </div>
    <!-- 手机号 -->
    <div class="text_group">
      <div :class="{input_group:true ,'is-invalid':phoneInvalid}">
        <input type="input" v-model="loginForm.phoneId" placeholder="手机号" @blur="leave" />
      </div>
      <div class="invalid-feedback" v-show="phoneInvalid">请输入手机号</div>
    </div>
    <!-- 验证码 -->
    <div class="text_group">
      <div class="input_group is-invalid">
        <input type="input" v-model="loginForm.code" placeholder="验证码" />
        <input
          class="btn"
          type="button"
          :disabled="disabled"
          ref="sendBtn"
          :value="sendBtnVal"
          @click="getCode"
        />
      </div>
      <div class="invalid-feedback">请输入验证码</div>
    </div>
    <div class="login_des">
      <p>
        新用户登录即自动注册，并表示已同意
        <span>《用户服务协议》</span>和
        <span>《隐私权政策》</span>
      </p>
    </div>
    <!-- 登录按钮 -->
    <div class="login_btn">
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import { Toast, Indicator } from "mint-ui";
export default {
  components: {},
  props: {},
  data() {
    return {
      sendBtnVal: "获取验证码",
      phoneInvalid: false,
      timer: null,
      disabled: false,
      loginForm: {
        phoneId: "",
        code: ""
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    if (store.state.user.phoneId) next("/my");
    else next();
  },

  watch: {},
  computed: {},
  methods: {
    leave() {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.loginForm.phoneId)) {
        alert("手机号码有误，请重新输入");
      }
    },
    getCode() {
      this.disabled = true;
      // if (this.loginForm.phoneId.length < 1) {
      //   this.phoneInvalid = true;
      // }
      this.$axios
        .get("sendCode", {
          params: {
            phoneId: this.loginForm.phoneId
          }
        })
        .then(data => {
          console.log(data);
          if (data.ok === 1) {
            this.sendBtnVal = 60;
            this.loginForm.code = data.code;
            this.timer = setInterval(() => {
              this.sendBtnVal--;
              if (this.sendBtnVal < 0) {
                clearInterval(this.timer);
                this.disabled = false;
                this.sendBtnVal = "获取验证码";
              }
            }, 1000);
          } else {
            alert(data.msg);
          }
        });
    },
    login() {
      // Toast({
      //   message: "操作成功",
      //   iconClass: "iconfont iconchangyonglogo40"
      // });
      Indicator.open("登录中...");
      setInterval(() => {
        Indicator.close();
      }, 2000);
      this.$axios.post("login", this.loginForm).then(res => {
        if (res.ok === 1) {
          this.$store.commit("changePhoneId", this.loginForm.phoneId);
          this.$router.history.push("/my");
          console.log(res.msg);
        } else {
          alert(res.msg);
        }
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
}
.logo {
  text-align: center;
}
.logo img {
  width: 150px;
}
.text_group,
.login_des,
.login_btn {
  margin-top: 20px;
  cursor: pointer;
}
.login_des {
  color: #aaa;
  line-height: 22px;
}
.login_des span {
  color: #4d90fe;
}
.login_btn button {
  width: 100%;
  height: 40px;
  background-color: #4cd96f;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  border: none;
  outline: none;
}
.login_btn button[disabled] {
  background-color: #8bda81;
}

.input_group {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.input_group input {
  height: 100%;
  // width: 60%;
  border: none;
  outline: none;
}
.input_group .btn {
  background: deeppink;
  height: 30px;
  color: whitesmoke;
}
.input_group button {
  border: none;
  outline: none;
  background: #fff;
}
.input_group button[disabled] {
  color: #aaa;
}
.is-invalid {
  border: 1px solid red;
}
.invalid-feedback {
  color: red;
  padding-top: 5px;
}
</style>